<template>
  <div class="account">
    <div class="form-wrap">
      <a-form name="custom-validation" ref="ruleForm">
        <a-form-item>
          <label>用户名</label>
          <a-input type="text" autocomplete="off" autoSize />
        </a-form-item>

        <a-form-item>
          <label>密码</label>
          <a-input type="password" utocomplete="off" />
        </a-form-item>

        <a-form-item class="hk">
          <Captcha />
        </a-form-item>

        <a-form-item class="hk">
          <a-button type="primary" html-type="submit" block> 登录 </a-button>
        </a-form-item>
      </a-form>
      <div class="text-center fs-12">
        <router-link to="/forget" class="color-white">忘记密码</router-link>|
        <router-link to="/register">注册</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive } from "vue";
import Captcha from "@/components/Captcha";
import "./captcha.js";
export default {
  name: "Login",
  components: {
    Captcha,
  },
  setup() {
    const formConfig = reactive({
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
    });

    return {
      formConfig,
    };
  },
};
</script>
<style lang="scss" scoped>
.hk {
  margin-top: 20px;
  margin-bottom: 20px;
}
.account {
  width: 100%;
  height: 100vh;
  background-color: #282828;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-wrap {
  width: 300px;
  padding-top: 100px;
  color: #fff;
  label {
    display: block;
    font-size: 14px;
    color: #fff;
    text-align: left;
  }
}
</style>
